
	

<template>
	<view>
		
	<view class="u-flex-col items-center justify-center group_2" v-if="isMine">
				<view class=" ">
				  <text class="text_1">{{$u.timeFormat(message.time, 'mm月dd日 hh:MM')}}</text>
			
				</view>
				<view class="u-flex right group_5">
					<view class="flex-col ">
					  <view class="flex-col">
					    <text class="text_3">
					   <view class="TUI-ImageMessage" @tap="previewImage">
					   	<image :class="'image-message ' + (isMine ? 'my-image' : '')"  :src="renderDom[0].src"></image>
					   </view>
					    </text>
					  </view>
					  <text class="text_4">{{message.isPeerRead?'已读':'未读'}}</text>
					</view>
					<image
					  :src="message.avatar?message.avatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868227394160305.png'"
					  class="image_1 image_2"
					/>
				</view>
		  
		    </view>
		    <view class="flex-col group_4" v-else >
		      <text class="text_5" v-if="(currentTime-message.time)>60">{{(message.time-currentTime)<60?$u.timeFormat(message.time, 'hh:MM'):$u.timeFormat(message.time, 'mm月dd日  hh:MM')}}</text>
		      <view class="flex-row group_5 u-m-l-20">
		        <image
		           :src="message.avatar?message.avatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868226658952161.png'"
		          class="image_1"
		        />
		        <view class="flex-col group_6">
		          <text class="text_6">{{message.from}}</text>
		        <view class="TUI-ImageMessage" @tap="previewImage">
		        	<image :class="'image-message ' + (isMine ? 'my-image' : '')" mode="widthFix" :src="renderDom[0].src"></image>
		        </view>
		        </view>
		      </view>
		     
		    </view>

	</view>
</template>

<script>
import { parseImage } from '@/static/js/tim/base/message-facade';

export default {
	data() {
		return {
			renderDom: [],
			percent: 0,
			currentTime:parseInt(new Date().getTime()/1000)
		};
	},

	components: {},
	props: {
		message: {
			type: Object,
			default: ''
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.setData({
					renderDom: parseImage(newVal),
					percent: newVal.percent
				});
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		previewImage() {
			uni.previewImage({
				current: this.renderDom[0].src,
				// 当前显示图片的http链接
				urls: [this.renderDom[0].src]
			});
		}
	}
};
</script>
<style>
@import './index.css';


.image_1 {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

 .right{
 	     width: 100%;
 	     display: flex;
 	     justify-content: flex-end;
 	     padding-right: 40rpx; 
 		 margin-top: 20rpx;
 }

  page{
	  background-color: #f2f2f2ff; 
  }
  .page {
    background-color: #f2f2f2ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  }
  .group {
    padding-top: 43rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }

 
  .text_1 {
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_2 {
    margin-left: 10.5rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_3 {
    width: 461rpx;
  }
  .image_2 {
    margin-left: 23rpx;
  }
  .text_5 {
    align-self: center;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_5 {
    margin-top: 40rpx;
  }
 

  .text-wrapper {
    padding: 20rpx 0 26rpx;
    background-color: #1d6aff;
    border-radius: 16rpx;
  }
  .text_4 {
    margin-top: 10rpx;
    align-self: flex-end;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_6 {
    margin-left: 24rpx;
  }

 

  .text_3 {
    margin-left: 16rpx;
    margin-right: 26rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
    text-align: left;
  }
  .text_6 {
    align-self: flex-start;
    color: #666666;
    font-size: 20rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 23rpx;
  }
  .text-wrapper_1 {
    margin-top: 17rpx;
    padding: 18rpx 0 29rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
 .text_7 {
    margin-left: 16rpx;
    margin-right: 15rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
</style>
